<template>
  <div id="searchView">
    <van-search
      background="#e6e2c3"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
      @focus="onFocus"
      @blur="onBlur"
      @input="onInput"
    />
    <van-overlay :show="isSuggest" @click="isSuggest = false">
      <div class="wrapper" @click.stop>
        <div id="searchHint">
          <ul @click="suggestClick">
            <li
              v-show="isSearchHint"
              style="height: 40px; line-height: 40px"
              v-for="(item, index) in suggestLists"
              :key="index"
              :id="item.id"
            >
              <van-icon name="search" /> {{ item.name }}--{{
                item.artists[0].name
              }}
            </li>
          </ul>
        </div>
      </div>
    </van-overlay>
    <div id="searchRecommend" v-show="!isSearchContent">
      <!-- 搜索历史 -->
      <div id="searchHistory" v-show="searchHistory.length > 1">
        <div>历史</div>
        <div>
          <div>
            <van-tag
              color="a2e1d4"
              round
              v-for="(item, index) in searchHistory"
              :key="index"
              @click="clickHistory(item)"
              >{{ item }}
            </van-tag>
          </div>
        </div>
        <div>
          <span
            @click="delSearchHistory"
            class="bobafont bobamusic-iconfontlajitong"
          ></span>
        </div>
      </div>

      <!-- 热搜榜 -->
      <div id="hotRanking">
        <div>
          <div>热搜榜</div>
          <div>
            <van-tag size="medium" color="#acf6ef" text-color="#ad0000"
              ><span class="bobafont bobamusic-shipin"></span>播放</van-tag
            >
          </div>
        </div>
        <div>
          <van-row>
            <van-col
              class="hotSearchWord"
              :class="{ topThree: index < 3 }"
              span="12"
              v-for="(item, index) in hotSearchList"
              :key="index"
              @click="hotSearchClick(item)"
            >
              <van-row>
                <van-col span="3">{{ index + 1 }}</van-col>
                <van-col span="21"
                  >{{ item.searchWord
                  }}<van-tag
                    type="danger"
                    v-if="index < 3"
                    style="margin-left: 20px"
                    >hot</van-tag
                  ></van-col
                >
              </van-row>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>

    <div id="searchContent" v-show="isSearchContent">
      <van-tabs v-model="active" animated swipeable sticky>
        <van-tab title="综合">
          <searchViewSynthesize
            @playmusic="playMusic"
            @playmv="playMv"
            @playmusiclist="playSongList"
            @addmusiclist="addMusicList"
          />
        </van-tab>
        <van-tab title="单曲">
          <single @playmusic="playMusic" @addmusiclist="addMusicList"/>
        </van-tab>
        <van-tab title="歌单">
          <songList @playmusiclist="playSongList" />
        </van-tab>
        <van-tab title="视频">
          <searchVideo @playmv="playMv" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
// 引入请求接口
import { searchSuggest, recommendMusic } from "network/api/SearchViewApi";

// 引入子组件
const single = () => import("./searchView/SearchViewSingle");
const songList = () => import("./searchView/SearchViewSongList");
const searchVideo = () => import("./searchView/SearchViewVideo");
const searchViewSynthesize = () => import("./searchView/SearchViewSynthesize");

export default {
  data() {
    return {
      value: "",
      isSearchHint: false,
      suggestLists: [],
      active: 0,
      // 搜索历史
      searchHistory: [],
      //热搜列表
      hotSearchList: [],
      isSearchContent: false,
      isSuggest: false,
    };
  },
  methods: {
    onSearch(val) {
      // 添加搜索记录到cookie
      this.searchHistory.push(val);
      this.$cookie.set("searchHistory", this.searchHistory.join(","));
      // 跳转到搜索界面
      this.isSearchContent = true;
      this.searchValue = val;

      // 更新搜索词
      this.$store.commit("setkeyWord", val);
      console.log("我是" + this.$store.state.keyWord);
      // 关闭提示
      this.isSuggest = false;
    },
    onCancel() {
      // 跳转到上级路由
      this.$router.go(-1);
    },
    onFocus() {
      // 获取焦点
      this.isSearchHint = true;
      this.isSuggest = true;
    },
    onBlur(e) {
      // 失去焦点
      // this.isSearchHint = false;
    },
    onInput(value) {
      // 内容改变触发
      searchSuggest(value).then((res) => {
        this.suggestLists = res.data.result.songs;
      });
    },
    delSearchHistory() {
      // 删除历史记录item
      this.searchHistory = [];
      this.$cookie.set("searchHistory", this.searchHistory.join(","));
    },
    clickHistory(item){
      // 点击历史记录
      this.$store.commit("setkeyWord", item);
      this.isSearchContent = true;
    },
    //点击建议
    suggestClick(v) {
      console.log(v);
      let musicId = v.path[0].id;
      this.$store.commit("setCurrentMusicId", musicId);
      this.$store.commit("setLoading", true);
      // 点击之后取消显示
      this.isSuggest = false;
    },
    // 点击热搜
    hotSearchClick(item) {
      console.log(item);
      this.$store.commit("setkeyWord", item.searchWord);
      this.isSearchContent = true;
    },
    // 播放音乐
    playMusic(item) {
      console.log("父组件拿到了");
      console.log(item);
      // 等音乐加载完成播放音乐
      this.$store.commit("setCurrentMusicId", item.id);
      this.$store.commit("setLoading", true);
    },
    playMv(item) {
      console.log(item);
      this.$router.push({ path: "videoView", query: { id: item.vid } });
      // 暂停歌曲
      this.$store.commit("setmusicPlayState", false);
    },
    playSongList(item) {
      console.log(item);
      this.$router.push({ name: "songlistinformation", params: { item } });
    },
    addMusicList(item){
      console.log(item);
      this.$store.commit("addMusicList",item)
      this.$toast.success('成功文案');
    }
  },
  mounted() {
    // 初始化历史记录
    this.searchHistory = [];

    // 获取热搜的信息
    recommendMusic().then((res) => {
      this.hotSearchList = res.data.data;
      console.log(res);
    });
    this.searchHistory = this.$cookie.get("searchHistory").split(",");
  },
  components: {
    single,
    songList,
    searchVideo,
    searchViewSynthesize,
  },
};
</script>

<style lang="less">
@color1: #2ae0c8;
@color2: #a2e1d4;
@color3: #acf6ef;
@color4: #cbf5fb;
@color5: #bdf3d4;
@color6: #e6e2c3;
@color7: #e3c887;
@color8: #fad8be;
@color9: #fbb8ac;
@color10: #fe6673;

@fontSize1: 13px;

#searchView {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  background: rgb(250, 246, 246);

  // 推荐内容区域
  #searchRecommend {
    #searchHistory {
      box-sizing: border-box;
      height: 40px;
      padding: 10px;
      display: flex;
      line-height: 20px;
      > div:first-child {
        flex: 1;
        font-size: @fontSize1;
      }

      > div:nth-child(2) {
        flex: 8;
        overflow: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        div {
          white-space: nowrap;
          span {
            margin: 0 5px;
          }
        }
      }

      > div:last-child {
        flex: 1;
        text-align: right;
        color: gray;
      }
    }

    // 热搜榜
    #hotRanking {
      padding: 10px 10px;
      > div:first-child {
        height: 30px;
        display: flex;
        font-size: @fontSize1;
        line-height: 30px;
        div:first-child {
          font-weight: bold;
          border-bottom: 1px @color10*2 solid;
          flex: 1;
        }
        div:last-child {
          text-align: right;
          border-bottom: 1px @color10*2 solid;
          flex: 1;
        }
      }

      // 热搜词条
      > div:last-child {
        padding-top: 30px;
        font-size: @fontSize1;
        // font-weight: bold;
        .hotSearchWord {
          margin: 10px 0;
          .van-tag {
            height: 13px;
          }
        }
        .topThree {
          font-weight: bold;
        }
      }
    }
  }

  // 搜索内容区域
  #searchContent {
  }
}
#searchHint {
  width: 90%;
  padding: 0 10px;
  background-color: @color3;
  position: absolute;
  z-index: inherit;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  li {
    overflow: hidden;
  }
}

#searchView > div.van-overlay {
  top: 49px;
}
</style>